<template>
  <div class="tab">
    <div v-for="(x, y) in list" :key="y" :class="idx == y ? 'active' : ''" @click="selectType(y)">
      {{ x }}
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits } from 'vue';
const emit = defineEmits(['select'])
const props = defineProps({
  list: {
    type: Array,
    defalut: []
  }
})
const idx = ref(0)
function selectType(y) {
  idx.value = y
  emit('select', y)
}
</script>
<style scoped lang="scss">
.tab {
  display: flex;

  div {
    padding: 10px 20px;
    cursor: pointer;
  }

  .active {
    background-color: #1889fa;
  }
}
</style>
